<template>
  <h1 class="m-v-30">插槽</h1>

  <h3 class="m-v-10">插槽内容与出口</h3>

  <Count title="插槽内容与出入口">
    默认插槽：百分比10
  </Count>

  <h3 class="m-v-10">渲染作用域</h3>
  <div>
    插槽可以访问父组建的作用域，插槽无法访问子组建数据
  </div>

  <h3 class="m-v-10">具名插槽</h3>
  <div>
    <Count title="具名插槽">
      默认插槽：百分比10

      <template v-slot:title> 具名插槽</template>
    </Count>

    <Count title="#具名插槽">
      默认插槽：百分比10
      <template #title> #具名插槽</template>
    </Count>

    <Count title="动态插槽名">
      <template #[dynamicSlotName]> #动态插槽名</template>
    </Count>

    <Count title="作用域插槽"
      v-slot="count">
    </Count>

  </div>
</template>

<script setup lang="ts">
import { ref } from "@vue/reactivity";
import Count from "../../components/count.vue";

let dynamicSlotName = ref('title')

</script>

<style scoped>
</style>